<!-- 商品详情 -->
<template>
	<div class="details">
		<Loading></Loading>
		<Banner :propdata='banner_val' 
			@swiper_H='swiper_H'>
		</Banner>
		<Info :propdata='data' 
			:propdata2='data2' 
			@Pingjia_T='Pingjia_T' 
			@Xiangqing_T='Xiangqing_T'>
		</Info>
		<Desc :propdata='data2'></Desc>
		<NewUserHB :proppath='"pid"+pid'></NewUserHB>
		<div class="HeaderNav" v-show="showHeaderNav" ref="HeaderNav">
			<section>
				<i class="iconfont icon-zuojiantou" style="font-size: 0.5rem;width: 0.3rem;" @click="this.$router.go(-1)"></i>
				<aside :class="{'default': HeaderNavIndex==1}" @click="setscrollTop(0)">产品</aside>
				<aside :class="{'default': HeaderNavIndex==2}" @click="setscrollTop(pingjia_top)">评价</aside>
				<aside :class="{'default': HeaderNavIndex==3}" @click="setscrollTop(xiangqing_top)">详情</aside>
				<aside :class="{'default': HeaderNavIndex==4}">推荐</aside>
				<i></i>
			</section>
		</div>
		<div class="BottomNav">
			<div class="main">
				<div class="item">
					<i class="iconfont icon-kefu" style="color: #ff6500;"></i>
					<label>联系客服</label>
				</div>
				<div class="item">
					<i class="iconfont icon-qunzhu"></i>
					<label>进群</label>
				</div>
				<div class="item">
					<i class="iconfont icon-shoucang"></i>
					<label>收藏</label>
				</div>
				<div class="item">
					<button type="button">{{bottomBtn}}</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Banner from './pages/Banner';
import Info from './pages/Info';
import Desc from './pages/Desc';
//加载中弹窗
import Loading from '../default/Loading';
// 新用户注册红包
import NewUserHB from '../default/NewUserHB';
export default{
	name:'Details',
	components:{
		Banner,
		Info,
		Desc,
		NewUserHB,
		Loading
	},
	data(){
		return {
			pid:0,
			HeaderNav_H:0,
			showHeaderNav:false,
			HeaderNavIndex:2,
			banner_val:{},
			data:{},
			data2:{},
			swiper_height:0,
			pingjia_top:0,
			xiangqing_top:0,
			bottomBtn:'立即报名'
		}
	},
	methods:{
		Funscroll(){
			//获取顶部导航栏高度
			if(this.$refs.HeaderNav){
				if(this.HeaderNav_H==0)this.HeaderNav_H = this.$refs.HeaderNav.offsetHeight || 0;
			}
			let sTop = window.pageYOffset;
			if(this.swiper_height>0 && sTop>this.swiper_height){
				//显示顶部
				this.showHeaderNav = true;
			}else{
				//隐藏顶部
				this.showHeaderNav = false;
			}
			//判断滚动条当前到达哪个位置
			//产品
			if(sTop>=this.swiper_height ){
				this.HeaderNavIndex = 1;
			}
			//评价
			if(sTop>=(this.pingjia_top - this.HeaderNav_H)){
				this.HeaderNavIndex = 2;
			}
			//详情
			if(sTop>=(this.xiangqing_top - this.HeaderNav_H)){
				this.HeaderNavIndex = 3;
			}
			//推荐...
		},
		swiper_H(val){
			this.swiper_height = val;
			// console.log("轮播图高度",this.swiper_height);
		},
		Pingjia_T(val){
			this.pingjia_top = val;
			// console.log("评价距离高度",this.pingjia_top);
		},
		Xiangqing_T(val){
			this.xiangqing_top = val;
			// console.log("详情距离高度",this.xiangqing_top);
		},
		//设置滚动条位置
		setscrollTop(val){
			document.documentElement.scrollTop = val - this.HeaderNav_H;
		},
		//获取商品基本数据
		getDataInfo(){
			this.$store.commit('sload');
			let url = 'https://m.youxiake.com/api/m/product/detail?pid='+this.pid+'&spm=eyJmcm9tIjoiODU3Iiwib3JpZ2luYWxfaWQiOjB9&oid=0';
			this.axios.get(url).then((res)=>{
				if(res.status==200){
					let data = res.data.data;
					//轮播图
					let banner = {};
					banner.imglist = data.product.flash_pic;
					banner.daysLabel = data.product.daysLabel;
					banner.product_cate_type = data.product.product_cate_type;
					this.banner_val = banner;
					
					this.data = data;
					if(data.product.adultprice && data.product.adultprice=='预报名')this.bottomBtn='预报名'
					//获取商品详情数据
					this.getDataDesc();
				}
			}).catch((err)=>{
				this.$store.commit('hload');
				console.log(err);
			})
		},
		//获取商品详情数据
		getDataDesc(){
			let url = 'https://m.youxiake.com/api/m/product/lines/detail?pid='+this.pid+'&did=0&oid=0';
			this.axios.get(url).then((res)=>{
				if(res.status==200){
					this.data2 = res.data.data;
				}
				this.$store.commit('hload');
			}).catch((err)=>{
				this.$store.commit('hload');
				console.log(err);
			})
		}
	},
	created() {
		this.pid = this.$route.query.pid;
		if(this.pid){
			//获取商品数据
			this.getDataInfo();
		}else{
			//未获取到商品ID，跳转回首页
			this.$router.push('/')
		}
	},
	mounted() {
		//监听页面滚动消息
		let timer;
		let flag = true;//判断是否打开滚动监听
		window.addEventListener('scroll',()=>{
			//设置定时器
			if(flag && this.$route.path == '/details')this.Funscroll();
			//关闭开关
			flag = false;
			//清除定时器
			clearTimeout(timer);
			//设置定时器，每隔15毫秒，打开一次开关
			timer = setTimeout( ()=>{ flag = true } , 15);
		} , true);
		
	}
}
</script>

<style scoped>
.details{
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	padding-bottom: 1.6rem;
	position: relative;
}
.details .HeaderNav{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	width: 100%;
	height: 1.2rem;
	padding-bottom: 0.1rem;
	background-color: rgba(247, 247, 247, 0.9);
	backdrop-filter:blur(10px);
}
.details .HeaderNav section{
	width: 90%;
	margin: 0 auto;
	font-size: 0.4rem;
	line-height: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.details .HeaderNav section aside{
	position: relative;
}
.details .HeaderNav section .default{
	font-weight: bold;
}
.details .HeaderNav section .default::after{
	content: "";
	position: absolute;
	font-weight: bold;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0.08rem;
	border-radius: 0.04rem;
	background: #ffd800;
}
.details .BottomNav{
	position: fixed;
	z-index: 99999;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.2rem;
	padding-top: 0.3rem;
	overflow: hidden;
	background-color: rgba(255,255,255,0.7);
	backdrop-filter:blur(10px);
}
.details .BottomNav .main{
	width: 95%;
	margin: 0 auto;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.details .BottomNav .main .item{
	display: flex;
	flex-direction: column;
	text-align: center;
	color: #505050;
}
.details .BottomNav .main .item i{
	font-size: 0.55rem;
	margin-bottom: 0.1rem;
}
.details .BottomNav .main .item:last-child{
	width: 48%;
}
.details .BottomNav .main .item button{
	border: none;
	color: white;
	height: 1rem;
	line-height: 1rem;
	border-radius: 0.5rem;
	width: 100%;
	font-size: 0.5rem;
	background: linear-gradient(-30deg, #ff5400, #ff8400);
}
</style>
